<template>
    <div class="products-info">
        <div class="products-cart clearfix">
            <form @submit.prevent="submit">
                <div class="form-group product-qty">
                    <label>Qty:</label>
                    <div class="select-container">
                        <select v-model="selectedQty" name="qty" id="qty" class="required-entry">
                            <option v-for="(q,index) in (qty > 10 ? 10 : qty)" :key="index" :value="q" v-text="q"></option>
                        </select>
                        <span class="icon-menu-dowm"></span>
                    </div>
                </div>
                <button type="submit" class="button btn-cart">Add to Cart
                    <span class="icon-cart"></span>
                </button>
            </form>
        </div>
        <attributes :attributes="attributes"></attributes>
    </div>
</template>
<script>
import attributes from './Attributes'
export default {
    data() {
        return {
            selectedQty: 1,
            product_id: 2659
        }
    },
    props: {
        qty: {
            type: Number
        },
        attributes: {
            type: Array
        }
    },
    components: {
        attributes
    },
    methods: {
        submit() {
            var data = {
                selectedQty: this.selectedQty,
                product_id: this.product_id
            }
            this.$parent.loading = true
            setTimeout(() => {
                this.$parent.loading = false
                this.$emit('openCart')
            }, 800)
        }
    }
}
</script>
<style scoped>
.products-info .product-qty {
    float: left;
    width: 25%;
    max-width: 150px;
}

.products-info .btn-cart {
    float: right;
    border: 1px solid #c70000;
    margin-top: 25px;
    width: 70%;
    height: 40px;
    color: #fff;
    text-transform: uppercase;
    background: #f41121;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

.products-info .btn-cart:hover {
    background: #ca0000;
}

.products-info .btn-cart span {
    margin-left: 5px;
}

@media (max-width: 991px) {
    .products-info {
        padding-top: 20px;
        -webkit-box-ordinal-group: 4;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4;
    }
}
</style>
